<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TTL Changer</title>

    <script src="/js/alpinejs.min.js" defer></script>
    <link rel="stylesheet" href="/css/bulma.css">
    <link rel="stylesheet" type="text/css" href="/css/admin.css">
    <link rel="stylesheet" href="styles.css" />
</head>

<body>

    <!-- START NAV -->
    <nav class="navbar is-black" x-data="{ isOpen: false }">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item brand-text" href="/">
                    Simple Admin
                </a>
                <a role="button" class="navbar-burger burger" @click="isOpen = !isOpen">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
            <div id="navMenu" class="navbar-menu" :class="isOpen ? 'is-active' : ''">
                <div class="navbar-start">
                    <a class="navbar-item" href="/"> Connection Info </a>
                    <a class="navbar-item" href="/atcommander.html"> AT Commands </a>
                    <a class="navbar-item" href="/bandlock.html"> Simple Network </a>
                    <a class="navbar-item" href="/ttl.html"> TTL Changer </a>
                    <a class="navbar-item" href="/speedtest.html"> OpenSpeedtest </a>
                </div>

            </div>
        </div>
    </nav>
    <!-- END NAV -->
    <div class="container" x-data="ttlCommands()" x-init="init">
        <div class="columns">
            <div class="column is-12">
                <div class="columns">
                    <div class="column is-8">
                        <div class="card">
                            <header class="card-header">
                                <p class="card-header-title">
                                    TTL Enabler
                                </p>
                            </header>
                            <div class="card-content">
                                <div class="content">
                                    <p>
                                    <h2>TTL Status</h2> <br>
                                    TTL is <span class="tag is-large"
                                        :class="ttldata.isEnabled ? 'is-success' : 'is-danger'"
                                        x-text="ttldata.isEnabled == true ? 'ON' : 'OFF'"></span>
                                    <br />
                                    TTL Set to <span x-text="ttldata.ttl"></span>
                                    </p>
                                    <div class="field">
                                        <label class="label">Set TTL</label>
                                        <div class="control">
                                            <input class="input" type="number" placeholder="64" x-model="newTTL">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="control">
                                            <button class="button is-link" @click="setTTL()">Set TTL</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column is-4">
                        <div class="card">
                            <header class="card-header">
                                <p class="card-header-title">
                                    Common TTL For Providers
                                </p>
                            </header>
                            <div class="card-content">
                                <div class="content">
                                    <ul>
                                        <li>Magenta: 65</li>
                                        <li>Red: 88</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
    <script>

        function ttlCommands() {
            return {
                isLoading: false,
                ttldata: null,
                newTTL: 0,
                init() {
                    fetch('/cgi-bin/get_ttl_status')
                        .then((res) => res.json())
                        .then((data) => {
                            this.ttldata = data
                        });
                },
                setTTL() {
                    fetch('/cgi-bin/set_ttl?' + new URLSearchParams({
                        ttlvalue: this.newTTL,
                    }))
                        .then((res) => res.json())
                        .then((data) => {
                            this.ttldata = data
                        })
                }
            }
        }
    </script>
</body>

</html>
